<template>
  <div class="the-page">

    <el-card>
      <el-divider content-position="left">短连接生成</el-divider>
      <div>
        <el-input v-model="shortUrl" clearable placeholder="请输入短连接" style="width:500px;margin-right:16px;"></el-input>
        <el-button type="primary" @click="generateShortUrl">生成链接</el-button>
      </div>
      <div v-if="afterUrl">
        <span>生成链接：{{afterUrl}}</span>
        <el-button type="text" v-clipboard:copy="afterUrl" v-clipboard:success="clipboardSuccess" v-clipboard:error="onError">复制链接</el-button>
      </div>
    </el-card>

    <el-card>
      <el-divider content-position="left">小程序码生成</el-divider>
      <div>
        <p style="margin: 12px 0;">
          <el-radio v-for="(item,index) in applets.sceneList" :key="index" v-model="applets.params.scene" :label="item.id">{{item.name}}</el-radio>
        </p>
        <el-input v-model="applets.params.page" clearable placeholder="请输入页面链接" style="width:300px;margin-right:16px;" @input="clearAppletsCode"></el-input>

        <el-button type="primary" @click="generateAppletsCode">生成小程序码</el-button>
      </div>
      <div class="appletsContent" v-show="applets.resUrl">
        <span>生成小程序码：</span>
        <img class="appletsPanel" :src="applets.resUrl" alt="">
      </div>
    </el-card>

    
    <el-card>
      <el-divider content-position="left">验证码查询</el-divider>
      <div>
        <el-input v-model="vfcodeOPT.phone" clearable placeholder="输入手机号码" style="width:500px;margin-right:16px;"></el-input>
        <el-button type="primary" @click="queryVerificationCode">查询</el-button>
      </div>
      <div>
        <p style="margin: 12px 0;">验证码：{{vfcodeOPT.resCode||""}}</p>
      </div>
    </el-card>


  </div>
</template>

<script>
import { postShortUrl, getAppletsCode,getVerificationCode } from "@/api/tool";
import { ElMessage } from "element-plus";
export default {
  name: "OtherMain",
  data() {
    return {
      // 短连接
      shortUrl: "",
      afterUrl: "",
      // 二维码
      qrcodeUrl: "",
      qrcodeRes: false,
      // 小程序码
      applets: {
        params: {
          scene: "mp4", //供销端(mp2)||用户端(mp1)
          page: ""
        },
        sceneList: [
          {
            id: "mp1",
            name: "趣摸鱼",
          },
          {
            id: "mp2",
            name: "旧供销端",
          },
          {
            id: "mp3",
            name: "新供销端",
          },
		  {
		    id: "mp4",
		    name: " 品客",
		  },
        ],
        resUrl: "",
      },
      // 验证码
      vfcodeOPT:{
        phone:"",
        resCode:"",
      }
    };
  },
  watch: {
    shortUrl(newValue) {
      if (!newValue) {
        this.afterUrl = "";
      }
    },
  },
  methods: {
    // 生成链接
    generateShortUrl() {
      if (!this.shortUrl || this.shortUrl.indexOf("http") == -1) {
        ElMessage.error("请输入正确链接地址");
        return false;
      }
      postShortUrl(this.shortUrl).then((res) => {
        if (res.code === 0) {
          this.afterUrl = res.data;
        }
      });
    },
    clipboardSuccess() {
      ElMessage.success("复制成功");
    },
    onError() {
      ElMessage.error("复制失败");
    },

    // 小程序码
    generateAppletsCode() {
      if (!this.applets.params.page) {
        ElMessage.error("请输入页面");
        return;
      }
      const _page = this.applets.params.page.split('?')
      const params = {
        scene: this.applets.params.scene,
        page: _page[0].indexOf('/') === 0 ? _page[0].replace('/', '') : _page[0],
        param: _page[1] || ''
      }
      getAppletsCode(params).then((res) => {
        if (res.code === 0) {
          this.applets.resUrl = "data:image/png;base64," + res.data;
        }
      });
    },
    clearAppletsCode(content) {
      if (!content) {
        this.applets.resUrl = "";
      }
    },

    // 验证码
    queryVerificationCode(){
      if(!/^\d{11}$/.test(this.vfcodeOPT.phone)){
        ElMessage.warning("请检查手机号格式！");
        return;
      }
      this.vfcodeOPT.resCode = "";
      getVerificationCode({phone:this.vfcodeOPT.phone}).then(res=>{
        if(res.code===0){
          this.vfcodeOPT.resCode = res.data;
        }else{
          ElMessage.warning("查询失败，请检查手机号或稍等后再查询！");
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.el-card {
  margin-bottom: 16px;
}
// 生成的二维码样式
.qrcodeContent {
  padding: 8px 0;

  & > .qrcodePanel {
    width: 120px;
    height: 120px;
    display: inline-block;
    & > #qrcode {
      width: 400px;
      height: 400px;
      transform: scale(0.3);
      transform-origin: 0 0;
    }
  }
}
//
.appletsContent {
  padding: 8px 0;
  .appletsPanel {
    width: 120px;
  }
}
</style>
